<template> <div class="page-container">
  <div class="toolbar">
     <el-row>
      <el-tabs type="border-card">
       <el-tab-pane label="基本信息">
       <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
       <el-row style="margin-top: -20px;">
       <el-divider content-position="center">
        <span style="font-size:16px;font-weight:800">基本信息</span>
       </el-divider>

       <!-- <el-form-item label="主键" v-show="false" prop="id" >
        <el-input v-model="dataForm.id" placeholder="请输入" ></el-input>
       </el-form-item> -->
       <!-- <el-form-item label="部门ID"  prop="deptId" >
        <el-select v-model="dataForm.deptId" clearable placeholder="请选者部门">
            <el-option v-for="(item,index)  in  deptList " :key="index" :label="item.name"
              :value="item.deptId"></el-option>
        </el-select> -->
       </el-form-item>
       <el-form-item label="名称"  prop="name" >
        <el-input v-model="dataForm.name" placeholder="请输入"></el-input>
       </el-form-item>
       <!-- <el-form-item label="供应商编码"  prop="code" >
        <el-input v-model="dataForm.code" placeholder="请输入"></el-input>
       </el-form-item> -->
       <el-form-item label="V码"  prop="vCode" >
        <el-input v-model="dataForm.vCode" placeholder="请输入"></el-input>
       </el-form-item>
       <!-- <el-form-item label="经营范围"  prop="range" >
        <el-input v-model="dataForm.range" placeholder="请输入"></el-input>
       </el-form-item> -->
       <el-form-item label="联系方式"  prop="mobile" >
        <el-input v-model="dataForm.mobile" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="地址"  prop="address" >
                  <el-input v-model="dataForm.address" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>

        <!-- <el-input v-model="dataForm.address" placeholder="请输入"></el-input> -->
       </el-form-item>
       <!-- <el-form-item label="总积分"  prop="total" >
        <el-input v-model="dataForm.total" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="可用积分"  prop="available" >
        <el-input v-model="dataForm.available" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="冻结积分"  prop="frozen" >
        <el-input v-model="dataForm.frozen" placeholder="请输入"></el-input>
       </el-form-item> -->
       <el-form-item label="描述"  prop="description" >
         <el-input v-model="dataForm.description" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>

        <!-- <el-input v-model="dataForm.description" placeholder="请输入"></el-input> -->
       </el-form-item>
       <!-- （1、待审核;2、正常；3、冻结） -->
       <!-- <el-form-item label="状态"  prop="sts" >
        <el-input v-model="dataForm.sts" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="审核人"  prop="auditor" >
        <el-input v-model="dataForm.auditor" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="管理人"  prop="chargerName" >
        <el-input v-model="dataForm.chargerName" placeholder="请输入"></el-input>
       </el-form-item> -->
       <!-- <el-form-item label="创建时间"  prop="createTime" >
        <el-input v-model="dataForm.createTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="更新时间"  prop="updateTime" >
        <el-input v-model="dataForm.updateTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建用户"  prop="creator" >
        <el-input v-model="dataForm.creator" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="更新用户"  prop="updater" >
        <el-input v-model="dataForm.updater" placeholder="请输入"></el-input>
       </el-form-item> -->
       <!-- 0删除 1不删除 -->
       <!-- <el-form-item label="是否删除 "  prop="deleteFlag" >

        <el-input v-model="dataForm.deleteFlag" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="申请人ID"  prop="applierId" >
        <el-input v-model="dataForm.applierId" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="申请原因"  prop="applierReason" >
        <el-input v-model="dataForm.applierReason" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="审批ID"  prop="auditorId" >
        <el-input v-model="dataForm.auditorId" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="审批原因"  prop="auditReason" >
        <el-input v-model="dataForm.auditReason" placeholder="请输入"></el-input>
       </el-form-item> -->
         <el-form-item label="开始日期" prop="startTime">
           <el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="请选择开始日期"></el-date-picker>
         </el-form-item>
         <el-form-item label="结束日期" prop="endTime">
           <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="请选择结束日期"></el-date-picker>
         </el-form-item>
       </el-row>
      </el-form>
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
         <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
        </el-button-group>
       </div>
      </div>
     </el-tab-pane>
    </el-tabs>
   </el-row>
  </div>
 </div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';
import {mapState} from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from 'v-distpicker';
import elTree from '@/views/tree/src/tree.vue'

//二.数据输出区
export default {

//2.1 注册组件
components: {
 jicTable,
 ThemePicker,
 LangSelector,
 VDistpicker,
 elTree,
},

//2.2 数据初始化区
data() {
 return {

  //2.2.1 公共数据初始化
  searchSize: 'mini',

// 2.2.2 form 表单数据初始化
  dataForm: {
   id:null,
   deptList:[],
   deptId:null,
   name:null,
   code:null,
   vCode:null,
   range:null,
   mobile:null,
   address:null,
   total:null,
   available:null,
   frozen:null,
   description:null,
   sts:null,
   auditor:null,
   chargerName:null,
   createTime:null,
   updateTime:null,
   creator:null,
   updater:null,
   deleteFlag:null,
   applierId:null,
   applierReason:null,
   auditorId:null,
   auditReason:null,
    startTime:null,
    endTime:null
},
//trigger 为blur 表示丢失焦点;为change 表示值发生变化;
  dataFormRules: {
  //  id:[
  //  { required: true, message: "请输入主键", trigger: "blur" },
  //  { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
  //  ],
  //  deptId:[
  //  { required: true, message: "请输入部门ID", trigger: "blur" },
  //    { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
  //  ],
   name:[
   { required: true, message: "请输入名称", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   code:[
   { required: true, message: "请输入供应商编码", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   vCode:[
   { required: true, message: "请输入V码", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   range:[
   { required: true, message: "请输入经营范围", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   mobile:[
   { required: true, message: "请输入联系方式", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   address:[
   { required: true, message: "请输入地址", trigger: "blur" },
    //  { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   total:[
   { required: true, message: "请输入总积分", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   available:[
   { required: true, message: "请输入可用积分", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   frozen:[
   { required: true, message: "请输入冻结积分", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   description:[
   { required: true, message: "请输入描述", trigger: "blur" },
    //  { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   sts:[
   { required: true, message: "请输入状态（1、待审核;2、正常；3、冻结）", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   auditor:[
   { required: true, message: "请输入审核人", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   chargerName:[
   { required: true, message: "请输入管理人", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   createTime:[
   { required: true, message: "请输入创建时间", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   updateTime:[
   { required: true, message: "请输入更新时间", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   creator:[
   { required: true, message: "请输入创建用户", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   updater:[
   { required: true, message: "请输入更新用户", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   deleteFlag:[
   { required: true, message: "请输入是否删除：0不删除， 1删除 ", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   applierId:[
   { required: true, message: "请输入申请人ID", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   applierReason:[
   { required: true, message: "请输入申请原因", trigger: "blur" },
    //  { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   auditorId:[
   { required: true, message: "请输入审批ID", trigger: "blur" },
     { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
   auditReason:[
   { required: true, message: "请输入审批原因", trigger: "blur" },
    //  { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ],
    startTime: [{
      required: true,
      message: "请选择开始日期",
      trigger: "blur"
    }, ],
    endTime: [{
      required: true,
      message: "请选择结束日期",
      trigger: "blur"
    }, ]
},
   //dialogVisible: false, //// 是否显示弹窗内容;
   //editDialogVisible1: false,//// 是否可编辑弹窗内容;
   //editLoading: false,////是否显示加载时动画效果;





   }//return 完结;
  },//data()方法 完结;

//2.3 Vue 方法区
methods: {
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = now.getHours(); //得到日期
      var minute = now.getMinutes(); //得到日期
      var second = now.getSeconds(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var endYear = year + 10;
     var endTime = endYear+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
      //dataForm.startTime
    /*   this.$set(this.dataForm, "startTime", startTime);
      this.$set(this.dataForm, "endTime", endTime); */
      let this_= this;
      this_.dataForm.startTime = now;
      this_.dataForm.endTime = endTime;
    },
//2.3.1 公共方法区

//2.请求列表数据
getDetail() {
 let this_ = this;
 if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != '' && this.$route.query.id != 'null' && this.$route.query.id != "undefined") {
  let params = {};
  params.id = this.$route.query.id;
    if (this.$route.query.activeName == "second") {
       //申请表编辑
          this.utils.request.getConfSupplierApplyDetail(params, function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
    }else{
      //申请表编辑
          this.utils.request.getConfSupplierDetail(params, function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
    }
 
 }else {
   this.getNowTime();
 }
},
  getDeptName() {
    let this_ = this;
    //let param = this.dataForm;
    this.utils.request.DepartmentNameInquiry({}, function(res) {
      this_.deptList = res.data;
      console.log(this_.deptList);
    });
  },

submitForm: function() {
  let this_ = this;
  this_.$refs.dataForm.validate(valid => {
  if (valid) {
   this_.$confirm("确认提交吗？", "提示", {}).then(() => {
     this_.editLoading = true;
     let params = this.dataForm;
     if(this.$route.query.activeName == "second"){
       this_.utils.request.saveConfSupplierApply(params, function (res) {
        if (res.code === "0000") {
            this_.$message({message: "操作成功", type: "success"});
        } else {
            this_.$message({message: "操作失败", type: "error"});
        }
        });
     this_.$router.go(-1);
     }else{
      this_.utils.request.saveConfSupplier(params, function (res) {
     if (res.code === "0000") {
        this_.$message({message: "操作成功", type: "success"});
     } else {
         this_.$message({message: "操作失败", type: "error"});
     }
     });
     this_.$router.go(-1);
     }
    
  });
  }
  });
},
// 7.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 8.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

/*图片预览*/
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
/*图片移除*/
handleRemove(file, fileList) {
console.log(file, fileList);
},
back(){
    this.$router.go(-1);
},
//==========2.3.1 JavaScript 自定义方法区==========





},
//1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
mounted() {
 this.getDetail();
},

}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
